<template>
  <div class="container" :class="theme">
    <slot></slot>
    <div class="component-wrap">
      <div class="datav-box">
        <h4>今日出勤</h4>
        <div class="datav-con statistics">
          <div>
            <h6>出勤人数</h6>
            <span>{{ attendanceData.antendcetot }}</span>
          </div>
          <div>
            <h6>管理人数</h6>
            <span>{{ attendanceData.managertot }}</span>
          </div>
          <div>
            <h6>总人数</h6>
            <span>{{ attendanceData.tot }}</span>
          </div>
          <div>
            <h6>出勤率</h6>
            <span>{{ attendanceRate > 100 ? 100 : attendanceRate}}%</span>
          </div>
        </div>
      </div>
      <div class="line"></div>
      <div class="datav-box">
        <h4>近期考勤</h4>
        <div class="datav-con">
          <Echart
            id="work-attendance"
            :options="attendanceOptions"
            height="230px"></Echart>
        </div>
      </div>
      <div class="line"></div>
      <div class="datav-box">
        <h4>工种分析</h4>
        <div class="datav-con">
          <Echart
            id="work-analyse"
            :options="analyseOptions"
            height="170px"></Echart>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Echart from "@/components/echart";
import moment from "moment";
import {mapGetters} from "vuex";

export default {
  components: {
    Echart
  },
  props:{
    theme:{
      type:String,
      default:''
    }
  },
  data () {
    return {
      attendanceData: {
        antendcetot: 0,
        managertot: 0,
        tot: 0
      },
      attendanceAxis: [],
      attendanceSeries: [],
      analyseSeries: [],
      workerTotal: 0,
    }
  },
  async mounted() {
    this.attendanceData = await this.$api.getAttendanceTotal({
      projectid: this.projects,
      today: moment().format("YYYY-MM-DD")
    }).then(res=>res.data)
    this.$api.getAttendanceTime({
      projectid: this.projects,
      start: moment().subtract(6, 'days').format('YYYY-MM-DD'),
      end: moment().format("YYYY-MM-DD")
    }).then(res=>{
      const {list} = res.data
      this.attendanceAxis = list.map(item=>{
        return moment(item.partitiondate).format('MM-DD')
      })
      this.$set(this.attendanceSeries,0,{
        data: list.map(item=>item.num),
        color: '#FAB217',
        name: '出勤人数'
      })
      this.$set(this.attendanceSeries,1,{
        data: list.map(item=> {
          return ((item.num / this.attendanceData.tot * 100)).toFixed(2)
        }),
        color: '#00FFFF',
        name: '出勤率'
      })
    })
    this.$api.getWorkerTotal({
      projectid: this.projects,
    }).then(res=>{
      this.analyseSeries = res.data
      this.workerTotal = res.data.reduce((prev,next)=>prev + parseInt(next.num),0)
    })
  },
  computed: {
    ...mapGetters(["projects"]),
    attendanceRate(){
      if(!this.attendanceData.tot) {
        return '0.00'
      }
      return ((this.attendanceData.antendcetot)
        / (this.attendanceData.tot) * 100).toFixed(2)
    },
    attendanceOptions() {
      return {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: val=>{
            return `
              <div>${val[0].name}<div>
              <div>
                <i>${val[0].marker}</i>
                <span>${val[0].seriesName}</span>
                <span style="padding-left: 20px;font-weight: bold">${val[0].value} 人</span>
              <div>
              <div>
                <i>${val[1].marker}</i>
                <span>${val[1].seriesName}</span>
                <span style="padding-left: 20px;font-weight: bold">${val[1].value} %</span>
              <div>
            `
          }
        },
        grid: {
          top: 40,
          bottom: 40
        },
        legend: {
          right: 0,
          itemWidth: 10,
          lineStyle: {
            width: 10
          },
          textStyle: {
            color: this.theme === 'light' ? '#333' : '#fff',
          },
        },
        xAxis: {
          type: 'category',
          axisTick: {
            show: false
          },
          axisLine: {
            show: true
          },
          axisLabel:{
            color:this.theme === 'light' ? 'rgba(0,0,0,0.8)' : 'rgba(255,255,255,0.8)'
          },
          data: this.attendanceAxis,
        },
        yAxis: [
          {
            type: 'value',
            splitLine: {
              show: false
            },
            axisLabel:{
              color:this.theme === 'light' ? 'rgba(0,0,0,0.8)' : 'rgba(255,255,255,0.8)'
            },
          },
          {
            type: 'value',
            max: 100,
            splitLine: {
              show: false
            },
            axisLabel:{
              color:this.theme === 'light' ? 'rgba(0,0,0,0.8)' : 'rgba(255,255,255,0.8)'
            },
          }
        ],
        series: this.attendanceSeries.map((item,index)=>{
          return {
            type: 'line',
            data: item.data,
            name: item.name,
            yAxisIndex: index,
            smooth: true,
            itemStyle: {
              color: item.color,
              opacity: 0
            },
            lineStyle: {
              width: 3
            },
          }
        })
      }
    },
    analyseOptions() {
      return {
        title: {
          text: this.workerTotal,
          subtext: '总数',
          left: 'center',
          top: '40%',
          itemGap: 0,
          textStyle: {
            color: this.theme === 'light' ? '#333' : '#00FAFF',
            fontSize: 24
          },
          subtextStyle: {
            color: this.theme === 'light' ? '#333' : '#ffffff',
            fontSize: 12,
            lineHeight: 15
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: val=>{
            return `
              <div>${val.seriesName}<div>
              <div>
                <i>${val.marker}</i>
                <span>${val.name}</span>
                <span style="padding-left: 20px;font-weight: bold">${val.value} 人</span>
              <div>
            `
          }
        },
        grid: {
          top: 10,
          bottom: 10
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['50%','80%'],
            label: {
              color: this.theme === 'light' ? '#888' : 'rgba(255,255,255,.4)',
            },
            labelLine: {
              show: true,
              length: 10,
              length2 : 30,
              lineStyle:{
                opacity:0.5
              }
            },
            data: this.analyseSeries.map(item=>{
              return {
                name: item.worktype,
                value: item.num
              }
            }).sort((a,b)=>b.value-a.value)
          }
        ],
        color: ['#F5B944','#86DFDE','#449AF8','#63CEF6','#CED8E8','#2A68F6']
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.container{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 500px;
}

.statistics {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  grid-template-rows: repeat(2,1fr);
  grid-gap: 12px;
  margin-bottom: 20px;

  div {
    background: rgba(23,34,87,0.8500);
    border-radius: 2px 2px 2px 2px;
    opacity: 1;
    border: 1px solid rgba(111,129,214,0.8500);
    padding: 16px 14px;
    display: flex;
    flex-direction: column;

    h6 {
      font-size: 14px;
      font-family: Source Han Sans CN-Normal, Source Han Sans CN;
      font-weight: 400;
      color: rgba(255,255,255,0.8500);
      margin: 0;
    }

    span {
      font-size: 22px;
      font-family: Source Han Sans CN-Medium, Source Han Sans CN;
      font-weight: 500;
      color: rgba(255,255,255,0.8500);
      line-height: 20px;
      margin-top: 8px;
    }
  }
}

//浅色
.light{
  .statistics {
    div {
      background: #EFF6FF;
      border: 1px solid rgba(0,0,0,0.1);
      h6 {
        color: rgba(0,0,0,0.8500);
      }
      span {
        color: rgba(0,0,0,0.8500);
      }
    }
  }
}
</style>